<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>树状</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="../resource/css/layui.css">
	<link rel="stylesheet" href="../resource/css/common.css">
	<style type="text/css">
        form {
            width: 500px;
            margin: 10px auto;
        }

        h1, h2, h3 {
            padding: 10px 0;
        } 

        a {
            text-align: right;
            font-size: 18px;
            color: #1C86EE;
        }

        .xtree_contianer {
            width: 500px;
            border: 1px solid #9C9C9C;
            overflow: auto;
            margin-bottom: 30px;
            background-color: #fff;
            padding: 10px 0 25px 5px;
        }

        .div-btns {
            margin: 20px 0;
        }

        .layui-form-label {
            width: 60px !important;
        }
	</style>
</head>
<body>
	<form class="layui-form">
		<div id="xtree3" class="xtree_contianer"></div>
	</form>

<!-- 	<div id="example" style="font-size: 14px;">
  		<my-component></my-component>
  		<component-two></component-two>
	</div> -->
	<div class="container" id="app" style="font-size: 14px;">
	    <todo-item :todos="todos01"></todo-item>
	</div>

	<script src="../resource/js/layui.js"></script>
	<script src="../resource/js/vue.js"></script>
	<script src="../resource/js/xtree.js"></script>
	<script type="x-template" id="component-todo">
	    <ul class="list-group" v-if="todos && todos.length > 0">
	        <li class="list-group-item" v-for="todo in todos" :class="{special: !todo.isSpecial}">
	            {{todo.title}}
	            <button class="btn btn-xs  pull-right" :class="{'btn-success': todo.isSpecial,'btn-danger': !todo.isSpecial }" @click="changeActive(todo)">
	                {{todo.isSpecial ? 'DONE' : 'What?'}}
	            </button>
	        </li>
	    </ul>
	    <div v-else>
	        <p>There isn't any todo</p>
	    </div>
	</script>
	<script type="text/javascript">
var todoItem = Vue.extend({
    template: '#component-todo',
    props: ['todos'],
    methods: {
        changeActive(todo) {
            todo.isSpecial = !todo.isSpecial;
        }
    }
})
Vue.component('todo-item', todoItem);
new Vue({
    el: '#app',
    data: {
        todos: [{
            id: 1,
            title: 'zgo to shoping',
            isSpecial: false
        }, {
            id: 2,
            title: 'jump for sport',
            isSpecial: true
        }, {
            id: 3,
            title: 'welcome vueJs',
            isSpecial: true
        }],
        todos01: [{
            id: 1,
            title: 'so so crazy',
            isSpecial: true
        }, {
            id: 2,
            title: 'i v ini',
            isSpecial: false
        }, {
            id: 3,
            title: 'nothing is there',
            isSpecial: true
        }]
    }
})
		// var tpls = new parent.window._tpl(); 
	 //    new Vue({
	 //        el:"#example",
	 //        components:{
	 //          	'my-component' : tpls.getData('singleInputOfText'),
	 //          	'component-two' : tpls.getData('singleInputOfText')
	 //        }
	 //    })

        var data = {
            teacher:[
                {id:0,name:"张老师",sex:"男"},
                {id:1,name:"李老师",sex:"男"},
                {id:2,name:"王老师",sex:"女"}
            ],
            student:[
                {id:3,name:"学生A",sex:"男",tId:0},
                {id:4,name:"学生B",sex:"男",tId:0},
                {id:5,name:"学生C",sex:"女",tId:1},
                {id:6,name:"学生D",sex:"女",tId:1},
                {id:7,name:"学生E",sex:"男",tId:2},
                {id:8,name:"学生F",sex:"女",tId:2}
            ],
            pet:[
                {id:9,name:'狗',}
            ]
        }

        parent.window.xtreeFormatData(data);

		var json = [
            {
                title: "节点1", value: "jd1", data: [
                  { title: "节点1.1", checked: true, disabled: true, value: "jd1.1", data: [] }
                , { title: "节点1.2", value: "jd1.2", checked: true, data: [] }
                , { title: "节点1.3", value: "jd1.3", disabled: true, data: [] }
                , { title: "节点1.4", value: "jd1.4", data: [] }
                ]
            }
            , {
                title: "节点2", value: "jd2", data: [
                  { title: "节点2.1", value: "jd2.1", data: [] }
                , { title: "节点2.2", value: "jd2.2", data: [] }
                , { title: "节点2.3", value: "jd2.3", data: [] }
                , { title: "节点2.4", value: "jd2.4", data: [] }
                ]
            }
            , { title: "节点3", value: "jd3", data: [] }
            , { title: "节点4", value: "jd4", data: [] }
    	];

		layui.use('form', function () {  
	        var form = layui.form;

		    var xtree3 = new layuiXtree({
		        elem: 'xtree3'
		        , form: form
		        , data: json
		        , isopen: false  //加载完毕后的展开状态，默认值：true
		        , ckall: true    //启用全选功能，默认值：false
		        , ckallback: function () { } //全选框状态改变后执行的回调函数
		        , icon: {        //三种图标样式，更改几个都可以，用的是layui的图标
		            open: "&#xe7a0;"       //节点打开的图标
		            , close: "&#xe622;"    //节点关闭的图标
		            , end: "&#xe621;"      //末尾节点的图标
		        }
		        , color: {       //三种图标颜色，独立配色，更改几个都可以
		            open: "#EE9A00"        //节点图标打开的颜色
		            , close: "#EEC591"     //节点图标关闭的颜色
		            , end: "#828282"       //末级节点图标的颜色
		        }
		        , click: function (data) {  //节点选中状态改变事件监听，全选框有自己的监听事件
		            // console.log(data.elem); //得到checkbox原始DOM对象
		            // console.log(data.elem.checked); //开关是否开启，true或者false
		            // console.log(data.value); //开关value值，也可以通过data.elem.value得到
		            // console.log(data.othis); //得到美化后的DOM对象
		        }
		    });

		    window.onclick = function() {
		    	var oCks = xtree3.GetChecked(); //获取全部选中的末级节点checkbox对象，返回的为Array  
				for (var i = 0; i < oCks.length; i++) {  
				    console.log(oCks[i].value);  
				}
		    };


	    });
		
	</script>
</body>